<template>
  <section class="system-setting">
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>
          系统配置信息&emsp;&emsp;&emsp;
          <el-button type="text" @click="handleEdit">编辑</el-button>
        </span>
      </div>
      <el-form label-width="20px" size="small">
        <div style="text-align: center;" v-for="item of listData" :key="item.Key">
          <el-input class="brand" :disabled="disabled" v-model="modal[item.Key].description" />
          <el-form-item>
            <el-input :disabled="disabled" v-model="modal[item.Key].value" />
          </el-form-item>
        </div>
        <div style="text-align: center;">
          <el-input class="brand" :disabled="disabled" style="visibility: hidden;" />
          <el-form-item v-if="!disabled">
            <el-button style="margin-right: 115px;" size="small" type="primary" @click="update">保存</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";

@Component
export default class MyApplication extends Vue {
  protected formData: any = {};
  protected listData: any = [];
  protected modal: any = {};
  protected disabled: boolean = true;

  protected handleEdit() {
    this.disabled = false;
  }
  protected created() {
    this.init();
  }
  protected async init() {
    const result: any = await this.$api.getAccountsSyscfg().then((res: any) => {
      this.listData = res.data;
      this.listData.forEach((item: any) => {
        const key = "Key";
        this.$set(this.modal, item[key], {
          value: item.Value,
          description: item.Description
        });
      });
    });
  }
  protected update() {
    const data: any = {
      cfg_items: []
    };
    for (const key in this.modal) {
      if (this.modal.hasOwnProperty(key)) {
        data.cfg_items.push({
          key,
          value: this.modal[key].value,
          description: this.modal[key].description
        });
      }
    }

    this.$api.updateSysCfg(data).then(() => {
      this.$message.success("保存成功");
      this.disabled = true;
    });
  }
}
</script>

<style lang="scss" scoped>
.system-setting {
  /deep/.el-input {
    &.brand {
      width: 200px;

      input {
        &:disabled {
          border: none;
          color: #333;
          background-color: transparent;
        }
      }
    }
  }
  /deep/.el-form-item {
    display: inline-block;
    text-align: left;
  }
}
</style>


